<div class="rules-editor" ng-form="rulesForm">
  <div class="modal-header">
      <h1>
        Edit rules for {{ dataSourceId }}
        <small>Rules are evaluated from top to bottom</small>
      </h1>
  </div>

  <div class="modal-body">
    <div class="rules">
        <div class="rule" ng-form="ruleForm" ng-repeat="rule in rules">
          <div class="summary">
            rule #{{$index + 1}}
            <span class="rule">
              <span class="type">
                <span ng-class="rule.direction">{{ rule.direction }}</span>{{ rule.type.substr(4) }}
              </span>

              <span class="period" ng-if="rule.timeType == 'ByPeriod'">
                {{ rule.period }}
              </span>

              <span class="label label-warning" ng-if="rule.timeType == 'ByPeriod' && ! rule.period">
                need valid period
              </span>

              <span class="interval" ng-if="rule.timeType == 'ByInterval'">
                {{ rule.interval }}
              </span>

              <span class="text-warning" ng-if="rule.timeType == 'ByInterval' && ! rule.interval">
                need valid interval
              </span>
            </span>
          </div>

          <div class="edit">
            <div class="direction">
              <div class="btn-group-vertical btn-group-sm">
                  <button type="button" class="btn btn-primary" ng-model="rule.direction" btn-radio="'load'" ng-change="updateRuleType({{ $index }})">Load</button>
                  <button type="button" class="btn btn-primary" ng-class="rule.direction == 'drop' ? 'btn-danger' : ''" ng-model="rule.direction" btn-radio="'drop'" ng-change="updateRuleType({{ $index }})">Drop</button>
              </div>
            </div>

            <div class="time-type">
              <div class="btn-group-vertical btn-group-sm">
                  <button type="button" class="btn btn-primary"
                    ng-model="rule.timeType" btn-radio="'ByPeriod'"
                    ng-change="updateRuleType($index, this)">
                    Period
                  </button>
                  <button type="button" class="btn btn-primary"
                    ng-model="rule.timeType" btn-radio="'ByInterval'"
                    ng-change="updateRuleType($index, this)">
                    Interval
                  </button>
                  <button type="button" class="btn btn-primary" ng-model="rule.timeType" btn-radio="'Forever'" ng-change="updateRuleType($index, this)">Forever</button>
              </div>
            </div>

            <div class="interval-period">

              <div class="period" ng-show="rule.timeType == 'ByPeriod'">
                <input type="text" class="form-control" ng-model="rule.period"
                  name="period" placeholder="ISO 8601 duration" ng-required="rule.timeType == 'ByPeriod'" iso-duration>
                <div class="alert alert-info"  ng-show="rule.period && rule.momentInterval">{{ rule.momentInterval.period().humanize() }}</div>
                <div class="alert alert-danger" ng-show="ruleForm.period.$error.isoDuration">Not a valid <a href="http://en.wikipedia.org/wiki/ISO_8601#Durations">IS0 8601 duration</a>.</div>
                <div class="alert alert-danger" ng-show="!ruleForm.period.$error.isoDuration && ruleForm.period.$error.required">Please enter a valid <a href="http://en.wikipedia.org/wiki/ISO_8601#Durations">IS0 8601 duration</a>.</div>
              </div>

              <div class="interval" ng-show="rule.timeType == 'ByInterval'">
                <input type="text" class="form-control" ng-model="rule.interval"
                  name="interval" placeholder="ISO 8601 interval" ng-required="rule.timeType == 'ByInterval'" iso-interval>
                <div class="alert alert-info" class="human" ng-show="rule.interval && rule.momentInterval">{{ rule.momentInterval.period().humanize() }} from {{ rule.momentInterval.start().utc().format('MMM Do, YYYY') }} to {{ rule.momentInterval.end().utc().format('MMM Do, YYYY') }}</div>
                <div class="alert alert-danger" ng-show="ruleForm.interval.$error.isoInterval">Not a valid <a href="http://en.wikipedia.org/wiki/ISO_8601#Time_intervals">IS0 8601 interval</a>.</div>
                <div class="alert alert-danger" ng-show="!(ruleForm.interval.$error.isoInterval) && ruleForm.interval.$error.required">Please enter a valid <a href="http://en.wikipedia.org/wiki/ISO_8601#Time_intervals">IS0 8601 interval</a>.</div>
              </div>

              <div class="forever" ng-show="rule.timeType == 'Forever'">
                Forever
              </div>
            </div>

            <div class="replicants" ng-if="rule.direction == 'load'">
              <div class="replicant" ng-repeat="(tier, n) in rule.tieredReplicants">
                <button class="btn btn-danger btn-xs" ng-click="removeReplicant(rule, tier)"><span class="fa fa-times"></span></button>
                <input type="number" ng-value="n" ng-change="updateReplicantCount(rule, tier, this)" ng-model="n" min="1"/>
                <span class="tier" ng-class="tier">{{tier}} {{tiers}}</span>
              </div>
              <div class="replicant new" ng-repeat="tier in tierNames | availableTiers:this">
                <button class="btn btn-default btn-xs" ng-click="addReplicant(rule, tier)" ng-class="tier"><span class="fa fa-plus"></span> <span class="tier" ng-class="tier">{{tier}}</span> replicant</button>
              </div>
              <div class="alert alert-danger" ng-show="replicantsNeeded(rule)">
                Add a replicant.
              </div>

            </div>

            <div>
              <div class="btn-group-vertical btn-group-sm">
                <button class="btn btn-info" ng-click="moveRule($index, -1)" ng-disabled="$first" title="decrease this rule's priority"><span class="fa fa-arrow-up fa-lg"></span></button>
                <button class="btn btn-info" ng-click="moveRule($index, 1)" ng-disabled="$last" title="increase this rule's priority"><span class="fa fa-arrow-down fa-lg"></span></button>
              </div>
            </div>

            <div>
              <button class="btn btn-danger" ng-click="removeRule($index)"><span class="fa fa-times fa-lg" title="remove rule"></span></button>
            </div>

          </div>
        </div>
    </div>

    <alert type="danger" ng-show="postError">{{postError}}</alert>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="addRule()"><span class="fa fa-plus"></span> add a rule</button>
    <button class="btn btn-info" ng-click="reset()">Reset</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="save()" ng-disabled="!(replicantsForAll(this) && rulesForm.$valid)">Save all rules</button>
  </div>

</div>